import Layout from '../../lib/components/Layout';
export default Layout;

# hide

The `hide{:.function}` middleware provides data to hide the
floating element in applicable situations, usually when it's not
within the same clipping context as the reference element.

<div className="flex flex-col gap-4">
  <Chrome
    label="Scroll up"
    center
    scrollable
    className="h-96"
    scrollHeight={325}
  >
    <Floating
      portaled
      middleware={[{name: 'offset', options: 5}, {name: 'hide'}]}
    >
      <div className="grid place-items-center w-32 h-32 border-2 border-gray-1000 border-dashed" />
    </Floating>
  </Chrome>
</div>

In the above example, the floating element turns red once it has
`escaped{:.objectKey}` the reference element's clipping context.
Once the reference element is hidden, it hides itself.

## Usage

```js
import {computePosition, hide} from '@floating-ui/dom';

computePosition(referenceEl, floatingEl, {
  middleware: [hide()],
}).then(({middlewareData}) => {
  const {referenceHidden} = middlewareData.hide;

  Object.assign(floatingEl.style, {
    visibility: referenceHidden ? 'hidden' : 'visible',
  });
});
```

## Order

`hide{:.function}` should generally be placed at the end of your
middleware array.

## Data

```ts
type Data = {
  referenceHidden: boolean;
  referenceHiddenOffsets: SideObject;
  escaped: boolean;
  escapedOffsets: SideObject;
};
```

### referenceHidden

Determines whether the reference element is currently not visible
on screen for the user.

### referenceHiddenOffsets

A side object containing overflow offsets.

### escaped

Determines whether the floating element has "escaped" the
reference's clipping context and appears fully detached from it.

### escapedOffsets

A side object containing overflow offsets.
